<template>
  <a-modal
    v-model:visible="visible"
    title="选择报表"
    width="100%"
    :after-close="afterClose"
    :destroy-on-close="true"
    :mask-closable="false"
    :keyboard="false"
    wrap-class-name="tn-model-full-scroll full-scroll-1200"
  >
    <a-layout class="select_template_layout">
      <a-layout-header class="select_template_search">
        <a-space>
          <DictFormItem
            v-model:value="formData.projectType"
            style="width: 200px"
            placeholder="试验类型"
            app-code="CONFIG"
            flag="PROJECT_TYPE"
            :is-http="true"
            class="gray"
            @change="getReportTemplateList"
          />
          <a-select
            ref="select"
            v-model:value="formData.templateType"
            style="width: 200px"
            placeholder="报表类型"
            allow-clear
            class="gray"
            @change="getReportTemplateList"
          >
            <a-select-option v-for="item in REPORTTYPE_ENUM" :key="item.value" :value="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
          <TnSearchInput
            v-model:value="formData.templateName"
            placeholder="按报表名称模糊搜索"
            @search="getReportTemplateList"
          />
        </a-space>
      </a-layout-header>
      <a-layout v-if="list.length">
        <a-layout-sider :width="240" class="select_template_sider">
          <a-card class="full-card" :body-style="{ padding: 0, overflow: 'auto' }" :bordered="false" title="报表名称">
            <div class="show_list_ul">
              <div
                v-for="item in list"
                :key="item.receiptTemplateId"
                :class="['show_list_li', activeKey === item.receiptTemplateId ? 'active' : '']"
                @click="changeTem(item)"
              >
                <customShowTooltips :max-width="200" :content="item.templateName"></customShowTooltips>
              </div>
            </div>
          </a-card>
        </a-layout-sider>
        <a-layout-content class="select_template_content">
          <div v-if="loadingShow" class="w-full h-full flex justify-center items-center">
            <a-spin tip="加载中..."></a-spin>
          </div>
          <a-card class="full-card" :body-style="{ padding: ' 16px 0' }">
            <iframe
              ref="refIframe"
              style="width: 100%; height: 100%"
              :src="`https://ow365.cn/?i=17462&ssl=1&furl=${VITE_GLOB_PRIVIEW_FILE_URL}/Rest/doc/file/filePreview?timestamp=${timestamp}&docId=${tempFileId}&addWatermarkFlag=false&filename=${tempFileName}`"
              frameborder="0"
              @load="iframeLoad"
            ></iframe>
          </a-card>
        </a-layout-content>
      </a-layout>
      <IcpEmpty v-if="!list.length"></IcpEmpty>
    </a-layout>
    <template #footer>
      <a-button plain @click="visible = false">取消</a-button>
      <a-button type="primary" ghost :loading="loading" @click="handleOk(1)">使用空白模板</a-button>
      <a-button type="primary" :loading="loading" :disabled="!activeKey" @click="handleOk(2)">选择</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { REPORTTYPE_ENUM } from './../index'
import { getReportTemplate } from '@@/api/report/index'
import { getAppEnvConfig } from '@/utils/env'
import { message } from 'ant-design-vue'
const { VITE_GLOB_PRIVIEW_FILE_URL } = getAppEnvConfig()
const visible = ref<boolean>(false)
const loading = ref<boolean>(false)
const formData = ref<any>({})
const emits = defineEmits(['submit'])
const afterClose = () => {
  list.value = []
  activeKey.value = null
}
const handleOk = (type) => {
  if (!activeKey.value && type === 2) {
    message.error('请选择报表')
    return
  }
  visible.value = false
  emits(
    'submit',
    type,
    list.value.find((item) => item.receiptTemplateId === activeKey.value)
  )
}
const timestamp = ref()
const show = () => {
  timestamp.value = new Date().getTime()
  visible.value = true
  getReportTemplateList()
}
const list = ref<any>([])
const activeKey = ref<any>(null)
const getReportTemplateList = () => {
  list.value = []
  getReportTemplate({
    status: 1,
    ...formData.value
  }).then((res) => {
    list.value = res || []
    tempFileName.value = ''
    tempFileId.value = ''
    if (res.length) {
      activeKey.value = res[0].receiptTemplateId
      tempFileName.value = res[0].fileName
      tempFileId.value = res[0].fileId
      loadingShow.value = true
    }
  })
}
const loadingShow = ref<boolean>(false)
const refIframe = ref()
const iframeLoad = () => {
  loadingShow.value = false
}
const tempFileName = ref()
const tempFileId = ref()
const changeTem = (item) => {
  activeKey.value = item.receiptTemplateId
  tempFileName.value = item.fileName
  tempFileId.value = item.fileId
}
defineExpose({
  show
})
</script>
